@include b(date-select) {
  width: 100%;
  height: 100%;

  @include e(input) {
    position: relative;
    width: 100%;
    padding: r(12) 0;
    line-height: r(28);
  }

  @include m(placeholder) {
    @include e(input) {
      color: var(--color-text-placeholder);
    }
  }

  @include m(arrow) {
    @include e(input) {
      padding-right: r(20);

      &:after {
        content: '';
        position: absolute;
        width: var(--cell-arrow-length);
        height: var(--cell-arrow-length);
        top: calc(var(--cell-padding-v) + 3px);
        right: r(2);
        border-right: r(2) solid var(--cell-arrow-color);
        border-bottom: r(2) solid var(--cell-arrow-color);
        transform: rotate(45deg);
        transform-origin: 50% 50%;
      }
    }
  }

  @include m(disabled) {
    @include e(input) {
      color: var(--color-text-disabled);
    }
  }
}
